<template>
  <div  class="home">
    <van-tabs v-model="active">
      <van-tab v-for="(item,index) in channelsList" :key="index" :title="item.name">
        <AriticleList :item="item" @show-more="handleShowMore" />
      </van-tab>
      <van-popup v-model="isShowPopup" :style="{width:'80%'}">
        <!-- 需求：弹出层的结构封装一个组件，这样利于组件可读性与维护 -->
        <MoreAction ref="MoreAction" @dislike="dislike" @moreReportArticle="moreReportArticle" />
      </van-popup>
    </van-tabs>
    <!-- 频道列表开关 通过定位 -->
    <div class="bar-btn">
      <van-icon name="wap-nav" @click="isShowChannelEdit" />
    </div>
    <!-- 折叠面板 -->
    <van-action-sheet v-model="showChannelEdit" title="标题">
      <channel-edit :active="active" @delChannel="delChannel" @closePopup="closePopup" />
    </van-action-sheet>
  </div>
</template>

<script>
import ChannelEdit from './components/channelEdit'
import MoreAction from '@/views/Home/components/moreAction.vue'
// import { reqGetChannels } from '@/api/channels'
import { reqDislikeArticle, reqReportAriticle } from '@/api/articles'
import AriticleList from '@/views/Home/components/articleList.vue'
import eventBus from '@/utils/event-bus'
import { mapState } from 'vuex'

export default {
  name: 'Home',
  components: {
    AriticleList,
    MoreAction,
    ChannelEdit
  },
  data() {
    return {
      // channelsList: [],
      active: 0,
      isShowPopup: false,
      articleId: '',
      showChannelEdit: false
    }
  },
  computed: {
    ...mapState('channels', ['channelsList'])

    // ...mapState('channels', ['allChannelsList'])
  },
  created() {
    console.log('home创建')
    // this.getChannels()
    this.$store.dispatch('channels/getChannels')
    this.$store.dispatch('channels/getAllChannels')
  },

  methods: {

    // 当点击叉号会触发这个函数
    async handleShowMore(articleId) {
      this.isShowPopup = !this.isShowPopup
      this.articleId = articleId
      await this.$nextTick()
      this.$refs.MoreAction.isReport = false
    },
    async dislike() {
      // 需求：用户点击我不感兴趣，向服务器发送请求告诉它我不感兴趣，利用vue的数据响应式（diff算法）本地删除这篇文章,
      // 删除：利用eventBus发布事件，让所有的articleList用on收消息判断是不是自己的文章，然后进行删除
      const res = await reqDislikeArticle(this.articleId)
      const obj = {
        articleId: this.articleId,
        channelId: this.channelsList[this.active].id
      }

      eventBus.$emit('delDislikeArticle', obj)
      this.isShowPopup = !this.isShowPopup

      this.$toast.success(res.message)
    },
    async moreReportArticle(type) {
      const res = await reqReportAriticle(this.articleId, type)
      this.isShowPopup = !this.isShowPopup
      const obj = {
        articleId: this.articleId,
        channelId: this.channelsList[this.active].id
      }

      eventBus.$emit('delDislikeArticle', obj)

      this.$toast.success(res.message)

      // 如果举报成功就让 一级举报为v-if=true  父传子 改变显示隐藏的值
      // eventBus.$emit('resetReport')
    },
    isShowChannelEdit() {
      this.showChannelEdit = !this.showChannelEdit
    },
    closePopup(index) {
      this.active = index
      this.showChannelEdit = !this.showChannelEdit
    },
    delChannel(index) {
      this.active = index
    }

  }

}
</script>

<style lang="scss" scoped>
.home{
  height: 100vh;
  padding-top: 46px+44px;
  padding-bottom: 50px;
  box-sizing: border-box;
  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }

  ::v-deep{
    .van-tabs__line{
      background-color: blue;
    }
    .van-tabs__wrap{
      position: fixed;
      top:44px;
      left: 0;
      right: 30px;
      overflow: hidden;

    }
    .van-tabs{
        height: 100%;
        overflow: hidden;
        .van-tabs__content{
            height: 100%;
            .van-tab__pane{
              height: 100%;
            }
          }
    }
}
}
</style>
